<template>
  <div :class="panelClass">
    <div class="text-center text-white">
      <div class="text-lg font-bold">{{ name }}</div>
      <div>手牌数：{{ cardCount }}</div>
    </div>
  </div>
</template>

<script setup>
import {computed} from 'vue'
const props = defineProps({
  name: String,
  cardCount: Number,
  position: String
});

const panelClass = computed(() => {
    console.log('props.position',props.position);
    
  switch (props.position) {
    case 'top': return 'mb-4';
    case 'left': return 'w-28 text-left';
    case 'right': return 'w-28 text-right';
    default: return '';
  }
});
</script>

<style scoped>
</style>